<h3 class="important-tittle text-left">Documentation</h3>

<p>
    Use the left menu to find what you need, if you find something wrong or you think that it could be better,
    you can edit any documentation file by clicking <i class="text-muted">"<i class="fa fa-pencil"></i> Edit"</i>
    at the top of every page.
</p>

<h3>Recommended Samples</h3>

<div class="row">
    <a href="examples/v1/wpf/Material%20Design" class="dark-link">
        <div class="col-sm-6 col-xs-12">
            <h4 class="text-center">Material design</h4>
            <p>
                Charts that match Material Design style.
            </p>
            <div class="text-center">
                <img src="https://raw.githubusercontent.com/Live-Charts/WebSiteDocs/master/v1/start/Images/material.gif"/>
            </div>
        </div>
    </a>
    <a href="examples/v1/wpf/Constant%20Changes%20II" class="dark-link">
        <div class="col-sm-6 col-xs-12">
            <h4 class="text-center">Constant Changes II</h4>
            <p>
                A high performance chart with 20k points, following multi thread practices.
            </p>
            <div class="text-center">
                <img src="https://raw.githubusercontent.com/Live-Charts/WebSiteDocs/master/v1/start/Images/constanchanges2.gif"/>
            </div>
        </div>
    </a>
</div>
<div class="row">
    <a href="examples/v1/wpf/30%20Series%2010k%20pts%20each" class="dark-link">
        <div class="col-sm-6 col-xs-12">
            <h4 class="text-center">30 series 10k pts each</h4>
            <p>
                A crowded chart, 30 series with 10,000 points each series.
            </p>
            <div class="text-center">
                <img src="https://raw.githubusercontent.com/Live-Charts/WebSiteDocs/master/v1/start/Images/30series10k.png" />
            </div>
        </div>
    </a>
    <a href="examples/v1/wpf/Scrollable" class="dark-link">
        <div class="col-sm-6 col-xs-12">
            <h4 class="text-center">Scrollable</h4>
            <p>
                An example that links 2 charts with many points to navigate through records easily.
            </p>
            <div class="text-center">
                <img src="https://raw.githubusercontent.com/Live-Charts/WebSiteDocs/master/v1/start/Images/scrollable.gif" />
            </div>
        </div>
    </a>
</div>

<p>
    Some of these examples use <a href="/licensing/pricing">LiveCharts.Geared</a>, it is an optional extension
    that boosts LiveCharts performance. If an example uses the Geared package, it will include a note informing you that it requires it.
</p>

<uses-geared></uses-geared>

<h3>FAQ</h3>

<div class="row">
    <div class="col-xs-12 spaced">
        <p>
            <b>
                How do I convert a chart to image?
            </b>
        </p>
        <p>
            Please use <a href="https://msdn.microsoft.com/en-us/library/system.windows.media.imaging.rendertargetbitmap.aspx">RenderTargetBitmap Class</a>.
        </p>
    </div>
    <div class="col-xs-12 spaced">
        <p>
            <b>
                How do I process a chart that is not on the current screen?
            </b>
        </p>
        <p>
            This is not supported yet, keep an eye on <a href="https://github.com/beto-rodriguez/Live-Charts/issues/415">#415</a>.
        </p>
    </div>
    <div class="col-xs-12 spaced">
        <p>
            <b>
                How do I zoom or pan progromatically?
            </b>
        </p>
        <p>
            It's as easy as setting the <i class="text-muted">Axis.MinValue</i> and <i class="text-muted">Axis.MaxValue</i> properties, if you need
            more information please see <a href="examples/v1/wpf/Data%20Pagination">Data Pagination</a> article.
        </p>
    </div>
    <div class="col-xs-12 spaced">
        <p>
            <b>
                Why are my animations ugly?
            </b>
        </p>
        <p>
            Reference types are easier to track than value types for the library. If the
            example you are following is plotting a reference type point, like <i class="text-muted">ObservableValue</i> class and
            you are reproducing it but plotting double values instead, then you might get a different animation.
        </p>
    </div>
    <div class="col-xs-12 spaced">
        <p>
            <b>
                Why is my chart animation performing slow?
            </b>
        </p>
        <p>
            Give <a href="/Licensing/Pricing">LiveCharts.Geared</a> a try! It's an independent package that boost the performance of the LiveCharts library.
            When LiveCharts was started, my intention was to create beautiful charts, performance was never the target. When the popularity of the library went up, I
            was forced to add this package so that the library was a full solution.
        </p>
    </div>
</div>
